<template>
    <div class="my-train">
        <el-tabs v-model="current" @tab-click="handleClick">
            <el-tab-pane label="待审核" name="1" />
            <el-tab-pane label="已通过" name="2" />
            <el-tab-pane label="已拒绝" name="3" />
        </el-tabs>
        <el-table :data="dataList" stripe style="width: 100%">
            <el-table-column width="180px" label="时间" align="center">
                <template slot-scope="scope">
                    <span class="gray">
                        {{ scope.row.application_time }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="titile" label="名字" align="center" show-overflow-tooltip />
            <!-- <el-table-column width="120px" label="状态" align="center">
                <template slot-scope="scope">
                    <span class="gray">
                        {{
              scope.row.state == 1 ? "已通过" : scope.row.state == 2 ? "未通过" : "待审核"
            }}
                    </span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" width="160px" align="center">
                <template slot-scope="scope">
                    <span class="table-link" @click="handleDel(scope.row)">删除订单</span>
                </template>
            </el-table-column>
        </el-table>
        <Page-tool :page="currentPage" @change-page="changePage" />
    </div>
</template>

<script>
    import {
        commonMy,
        trainDel
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                current: "1", // 当前选中状态
                dataList: [], // 数据列表
                currentPage: 1
            };
        },
        mounted() {
            this.getList();
        },

        methods: {
            // 切换页数
            changePage(page) {
                this.currentPage = page;
                this.getList();
            },
            // 切换状态
            handleClick(v) {
                this.current = v.name;
                this.getList();
            },
            // 删除活动
            handleDel(row) {
                this.$confirm("确认删除该培训吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        trainDel({
                            id: row.a_id
                        }).then(response => {
                            this.getList();
                        })
                    })
                    .catch(() => {});
            },
            // 获取数据
            getList() {
                let that = this
                commonMy({
                    table: 1,
                    status: that.current,
                    page: that.currentPage,
                    limit: 6
                }).then((response) => {
                    that.dataList = response.data.list
                });
            },
        },
    };
</script>
<style>
    .el-tooltip__popper {
        max-width: 600px;
    }
</style>
<style lang="scss" scoped>
    .my-train {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);

        .gray {
            color: #909090;
        }

        .table-link {
            color: #f00;
            cursor: pointer;
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>